<template>
	<view>
		<navbar title="超市便利奖励" color="#fff" bgColor="transparent" :isZhanwei="false">
		</navbar>
		<div class="head-box" :style="{background:`url('${imgs.my.m11}')`}">
			<div class="inner-box">
				<div class="t">累计奖励</div>
				<div class="reward">
					<div class="left">
						￥<text>{{total.toFixed(2)}}</text>
					</div>
					<div class="right" @click="$navTo('pages/dealer/withdraw/apply')">
						提现
					</div> 
				</div>
				<div class="bottom">
					<div class="itm">
						<div class="top">在途奖励（元）</div>
						<div class="bt">{{running.toFixed(2)}}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- tabs -->
		<div style="background: transparent;margin-bottom: 40rpx;">
			<u-tabs inactive-color="#000" :list="tabs" :is-scroll="false" v-model="curTab"
				:active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" />
		</div>
		<div v-if="list.length" class="big-bx">
			<div v-for="(item,index) in list" :key="index" class="good-item">
				<!-- <div class="date">{{item.date}}</div> -->
				<div class="box">
					<div class="time">{{createTime(item.payTime)}}</div>
					<div class="info">
				<!-- 		<div class="left">
							<image :src="item.goods_thumbnail_url" mode=""></image>
							<text>{{'拼多多'}}</text>
						</div> -->
						<div class="right">
							<view class="u-line-2 name">
								店铺 : {{item.productName}}
							</view>
							<div class="times">
								<view>订单编号 : {{item.orderId}}</view>
								<view>订单状态 : {{status[item.status]}}</view>
							</div>
							<div class="times">
								<view>
									预估到账时间：{{comeTime(item.payTime)}}
								</view>
								<view>
									支付金额：￥{{(item.payPrice)}}
								</view>
							</div>
							<div class="btom">
								<div class="lf">
									奖励金额 ￥{{item.commission||0}}
								</div>
								<div class="rh">
									下单奖励
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-else style="padding-top: 100rpx;">
			<u-empty margin-top="50rpx" mode="list"></u-empty>
		</div>
	</view>
</template>

<script>
	import imgs from '@/utils/imgs.js'
	import navbar from '@/components/w-navbar/index.vue'
	// 订单状态： 2：付款（如果是CPA订单则表示奖励已创建） 3：完成 4：取消 5：风控 6：结算
	export default {
		components: {
			navbar
		},
		data() {
			return {
				imgs,
				order_status: 0,
				status:{
					'2':'已付款',
					'3':'已完成',
					'4':'已取消',
					'5':'风控订单',
					'6':'已结算',
				},
				tabs: [{
						name: `全部`,
						value: 0
					},
					{
						name: `已结算`,
						value: 6
					},
					{
						name: `已失效`,
						value: 4
					},
					{
						name: `待结算`,
						value: 3
					},
				],
				curTab: 0,
				list: [],
				running:0,
				total:0
			};
		},
		methods: {
			onChangeTab(e) {
				this.order_status = this.tabs[e].value
				this.getList()
			},
			createTime(time){
				return this.$timestampToDate(time)
			},
			comeTime(time){
				
				return this.$addOneMonthAndFormat(time)
			},
			async getList() {
				const res = await this.$api.my.myRewardList({
					type: 7,
					order_status:this.order_status
				})
				this.list = res.data.order_list.list||[]
				if(this.order_status===0){
					this.running = res.data.order_list.running
					this.total =  res.data.order_list.total
				}
				// console.log(res.data);
			}
		},
		onLoad() {
			this.curTab = 0
			this.getList()
		}
	}
</script>

<style lang="scss">
	.u-tabs {
		background-color: transparent !important;
	}

	.big-bx {
		padding: 0 22rpx;
	}

	.good-item {
		margin-bottom: 40rpx;

		.date {
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			margin-bottom: 24rpx;
		}

		.box {
			width: 710rpx;
			height: 288rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 12rpx 28rpx;
			box-sizing: border-box;

			.time {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-bottom: 20rpx;
			}

			.info {
				display: flex;
				align-items: center;

				.right {
					flex: 1;

					.name {
						font-weight: 400;
						font-size: 26rpx;
						color: #333130;
						margin-bottom: 22rpx;
					}

					.times {
						font-weight: 400;
						font-size: 24rpx;
						color: #999390;
						margin-bottom: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.btom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.lf {
							width: 198rpx;
							height: 48rpx;
							background: linear-gradient(135deg, #FD3052 0%, #FD3041 100%);
							border-radius: 24rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.rh {
							width: 96rpx;
							height: 36rpx;
							border-radius: 4rpx;
							border: 1rpx solid #FFC225;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFC225;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				.left {
					position: relative;
					width: 200rpx;
					height: 200rpx;
					background: #EEEEEE;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 24rpx;

					>image {
						width: 100%;
						height: 100%;
					}

					>text {
						width: 200rpx;
						height: 46rpx;
						background: #000000;
						border-radius: 0rpx 0rpx 12rpx 12rpx;
						opacity: 0.4;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						bottom: 0;
					}
				}
			}
		}
	}

	.head-box {
		height: 460rpx;
		background-size: 100% 100%;
		background-repeat: repeat;
		position: relative;
		margin-bottom: 100rpx;

		.inner-box {
			width: 686rpx;
			height: 350rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 200rpx;
			padding: 32rpx;
			box-sizing: border-box;

			.t {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				margin-bottom: 12rpx;
			}

			.bottom {
				display: flex;
				align-items: center;

				.itm {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 120rpx;

					.top {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
					}

					.bt {
						font-weight: 500;
						font-size: 40rpx;
						color: #000000;
					}
				}
			}

			.reward {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 56rpx;

				.left {
					font-weight: bold;

					>text {
						font-size: 72rpx;
					}
				}

				.right {
					width: 136rpx;
					height: 48rpx;
					background: #FF8C19;
					border-radius: 24rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}

			}
		}
	}
</style>